<template>
  <div class="occupancy-action flex flex-column">
    <antd-form :options="formOption" @submit="formData = $event" class="flex-fixed" style="margin: 10px" />
    <common-table
      :pagination="{ pageSize: 6 }"
      :api-params="paramsData"
      :api="getDataAsync"
      :columns="columns"
      class="flex-auto-height"
    >
      <template #index="{ text, scope, index }">{{ index + 1 }}</template>
      <template #avatar="{ text }">
        <avatar style="width: 50px" :src="text" />
      </template>
      <template #action="{ text, scope }">
        <span style="color: #62b8b1; cursor: pointer" @click="goDetails(scope)">详情</span>
      </template>
    </common-table>
  </div>
</template>

<script>
import AntdForm from '@gis/lib/components/antd-form/index.js';
import { homestayWarningOccupancy } from '@gis/lib/api';
import CommonTable from '@gis/lib/components/antd-table/index.vue';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';
import timeFormat from '@gis/lib/utils/time-format.js';
import { openPeopleDetailsDialog } from '../../../reality-people/people-details/peopleDetailsDialog.js';
export default {
  name: 'occupancy-action',
  components: { AntdForm, Avatar, CommonTable },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      formData: {
        name: '',
      },
      columns: [
        {
          title: '头像',
          dataIndex: 'head_img_url',
          scopedSlots: { customRender: 'avatar' },
          align: 'left',
          width: 80,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '出发点',
          dataIndex: 'where_from',
        },
        {
          title: '入住时间',
          dataIndex: 'enter_time',
          key: 'enter_time',
          ellipsis: true,
        },
        {
          title: '入住房间',
          dataIndex: 'room_full_name',
          key: 'room_full_name',
          ellipsis: true,
        },
        {
          title: '预离时间',
          dataIndex: 'end_time',
          key: 'end_time',
          ellipsis: true,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 80,
        },
      ],
      formOption: [
        {
          component: 'a-input',
          field: 'name',
          props: { placeholder: '请输入姓名' },
          labelCol: { span: 0 },
          wrapperCol: { span: 24 },
        },
        {
          component: 'a-input',
          field: 'where_from',
          props: { placeholder: '请输入出发点' },
          labelCol: { span: 0 },
          wrapperCol: { span: 24 },
        },
        {
          component: 'a-range-picker',
          field: 'create_time_start,create_time_end',
          value: [],
          props: {
            placeholder: ['请选择开始时间', '请选择结束时间'],
          },
          colSpan: 12,
          labelCol: { span: 0 },
          wrapperCol: { span: 24 },
        },
      ],
    };
  },
  computed: {
    paramsData() {
      function formatTime(time, formatter) {
        return !time ? '' : formatter(time, 'day');
      }
      const { create_time_start, create_time_end } = this.formData;
      return Object.assign({ room_id: this.details.room_id }, this.formData, {
        create_time_start: formatTime(create_time_start, timeFormat.getDateStartOf),
        create_time_end: formatTime(create_time_end, timeFormat.getDateEndOf),
      });
    },
  },
  methods: {
    goDetails(details) {
      openPeopleDetailsDialog(details);
    },
    async getDataAsync(params) {
      if (!params.room_id) return;
      /* status : 0所有 1在住 2最新历史入住 */
      params.status = 1;
      const { data = {} } = await homestayWarningOccupancy(params);
      return { data: data.list, total: data.count };
    },
  },
};
</script>

<style scoped lang="less">
.occupancy-action {
  width: 100%;
  height: 100%;
}
</style>
